ui_top = document.getElementById('ui_top');
ui_top_gold = document.getElementById('ui_top_gold');
ui_top_level = document.getElementById('ui_top_level');
ui_top_health = document.getElementById('ui_top_health');
ui_top_maxHealth = document.getElementById('ui_top_maxHealth');

ui_right = document.getElementById('ui_right');

ui_gameMsg = document.getElementById('ui_gameMsg');
ui_msg = document.getElementById('msg');

ui_bottom = document.getElementById('ui_bottom');
ui_bottom_content = document.getElementsByClassName('ui_bottom_content');

//on cache l'interface de jeu tant que le joueur n'est pas loggué
canvas.style.visibility = 'collapse';
ui_top.style.visibility = 'collapse';
ui_right.style.visibility = 'collapse';
ui_bottom.style.visibility = 'collapse';

function userConnected() {
    setCanvas();
    setUI();

    setInterval(updHeroStats, 1000);
    draw();
    canvas.style.visibility = 'visible';
    ui_top.style.visibility = 'visible';
    ui_bottom.style.visibility = 'visible';
}

function userDisconnected() {
    canvas.style.visibility = "collapse";
}

function setCanvas() {
    var pMenu = document.getElementById('players_menu');

    var pw = canvas.parentNode.clientWidth;
    var ph = canvas.parentNode.clientHeight;

    canvas.style.top = (ph-canvas.getHeight())/8 + 'px';
    canvas.style.left = 200 +'px';

    canvasOffset.top = parseInt(canvas.style.top);
    canvasOffset.left = parseInt(canvas.style.left);
//    console.log('setCanvas() called...');
}

function setUI() {
    ui_top.style.width = parseInt(canvas.style.width) + 'px';
    ui_bottom.style.width = parseInt(canvas.style.width) + 'px';
    ui_gameMsg.style.width = parseInt(canvas.style.width)  + 'px';
    ui_top.style.left = canvas.style.left;

    ui_bottom.style.left = canvas.style.left;
    for(var tabs = 0; tabs < ui_bottom_content.length; tabs++)
        { ui_bottom_content[tabs].style.left = canvas.style.left; }
    ui_gameMsg.style.left = canvas.style.left;

    ui_top.style.top = canvas.style.top;
    ui_bottom.style.top = parseInt(canvas.style.top)
        + parseInt(canvas.style.height)
        - parseInt(ui_bottom_content[0].clientHeight) +'px';
    ui_gameMsg.style.top = parseInt(canvas.style.top) + parseInt(ui_top.clientHeight) + 'px';

    //RIGHT PANEL
    ui_right.style.width = parseInt(canvas.style.width) / 4 + 'px';
    ui_right.style.height = parseInt(canvas.style.height)
                        - parseInt(ui_bottom.clientHeight)
                        - parseInt(ui_bottom_content[0].clientHeight) + 'px';


    ui_right.style.left = parseInt(canvas.style.left) +
        parseInt(canvas.style.width) - parseInt(ui_right.clientWidth) + 'px';
    ui_right.style.top = parseInt(canvas.style.top) + parseInt(ui_top.clientHeight) + 'px';

//    console.log('setUI() called...');
}

function setupInfoPanel(tileClicked) {
    //ui_right.childNodes[0] = close btn
    while(ui_right.childNodes[1] != null) { ui_right.removeChild(ui_right.childNodes[1]) }

    var tileInfos = tileClicked.getInfos();

    var infosDiv = document.createElement('div');
        infosDiv.innerHTML = tileInfos;
    ui_right.appendChild(infosDiv);
}

function updHeroStats() {
    ui_top_level.innerHTML = hero.level;
    ui_top_gold.innerHTML = hero.gold;
    ui_top_health.innerHTML = hero.health;
    ui_top_maxHealth.innerHTML = hero.maxHealth;
}